<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
        href="https://res.dcdev.net/dcdev/v1.0.8/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>数控开发 · 查看组件</title> <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link type="text/css" rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <!------ 以上内容不要动 --------------------------------------------------------->

    <style>
        html {
            height: 100%;
        }

        body {
            overflow: hidden;
            height: 100%;
        }

        .dcdev-title {
            width: max-content !important;
        }

        body {
            background-color: white;
        }

        .mask {
            width: 100%;
            height: 100%;
            background: white;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 8000;
            -moz-user-select: none;
            -webkit-user-select: none;
        }
    </style>
</head>

<body>
    <!-- 页面内容容器，用于统一根据分辨率控制页面大小 -->
    <div id="body_container" style="height: 100%;position: inherit;overflow-y: scroll;overflow-x: hidden;">
        <div id="component_list"></div>
        <div id="component_type_list2" style="margin-left: 10px;"></div>
        <div id="component_type_list" class="xx-waterflow" style="margin-left: 10px;"></div>
        <div id="component_container"></div>
        <div id="component_list_code_container"></div>
    </div>

    <!-- 全屏居中 -->
    <div id="_progress_" style="position:fixed;left: 0px;top:0px; width: 100%;height: 100%;background-color: white;">
        <div class="mask"></div>
        <div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index: 9999;">
            <div id="progress">
                <el-progress type="circle" :percentage="progressNum"></el-progress>
            </div>
        </div>
    </div>
</body>

<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/init.js" id="initClass"
    authorize_mode="none" console_mode="1"></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/ui.js" id="ui_class"
    xhr_show_loading=0></script>
</script>
<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>

<script>
    $('#component_container').load("select_component_list.html");
    $('#component_list_code_container').load("select_component_no_api.html");
</script>

<script type="text/javascript">
    //组件初始化
    var progressMain = {
        data() {
            return {
                progressNum: 0, //设置值
            }
        },
        methods: {
            startProgress() {
                this.startTimer = setInterval(() => {
                    this.progressNum += 10;
                    if (this.progressNum > 99) {
                        clearInterval(this.startTimer)
                    }
                }, 200);
            },

        },
        mounted() { //钩子函数
            this.startProgress();

        }
    }
    var Ctor = Vue.extend(progressMain);
    new Ctor().$mount('#progress');
</script>

</html>